<template>
  <div class="box">
    <div class="top flex vc hb">
      <div class="title flex vc">
        <div class="line"></div>
        <div>开票记录</div>
      </div>
    </div>
    <van-list class='list' :offset="10" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="ul flex column hb" v-for='item in list' @click='getDetail(item)' :key="item.id">
        <div class='li1 flex vc hb'>
          <div class='flex vc'>
            <img class='iconTime' src="../../assets/img/invoice/time.png" alt="">
            {{item.donateDate}}
          </div>
          <div class='flex vc'>
            {{item.status === 1 ? '已开票' : '待处理'}}
            <img class='iconBack' src="../../assets/img/invoice/back.png" alt="">
          </div>
        </div>
        <div class="li2 flex vc hb">
          <div>{{item.projectTitle}}</div>
          <div>{{item.donate}}元</div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { invoiceList } from '@/api/invoice'
import { List, Cell } from 'vant'

export default {
  components: {
    [List.name]: List,
    [Cell.name]: Cell
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1
    }
  },

  created () {

  },

  methods: {
    onLoad () {
      invoiceList({ self: true, page: this.page }).then(response => {
        this.list = response.data.list
        this.finished = response.data.isLastPage
        this.page += 1
      })
    },
    getDetail (r) {
      this.$router.push({ path: '/invoiceDetail', query: r })
    }
  }
}
</script>

<style scoped="scoped">
  .flex {
    width: auto;
  }

  .box {
    width: 100vw;
    height: 100vh;
    padding: 0 15px;
    color: #434343;
  }

  .top {
    padding: 10px 0 15px;
    font-size: 17px;
  }

  .title .line {
    width: 2px;
    height: 16px;
    background: #762A2A;
    margin-right: 5px;
  }

  .ul {
    width: 100%;
    height: 90px;
    padding: 15px 8px 20px;
    font-size: 17px;
  }

  .li1 {
    font-size: 13px;
  }

  .li2 {
    color: #000;
  }

  .iconTime {
    width: 12px;
    height: 12px;
    margin-right: 5px;
  }

  .iconBack {
    width: 5px;
    height: 10px;
    margin-left: 5px;
  }
</style>
